<template>
  <div class="periods-box">
    <x-header
      :left-options="{backText:''}"
      :right-options="{showMore:true}"
      @on-click-more="showMenus = true"
      style="background-color:#fff;"
    ></x-header>
    <div class="search">
      <search
        @result-click="resultClick"
        @on-change="getResult"
        :results="results"
        v-model="value"
        position="absolute"
        auto-scroll-to-top
        @on-focus="onFocus"
        @on-cancel="onCancel"
        @on-submit="onSubmit"
        :auto-fixed="false"
        ref="search"
      ></search>
    </div>
    <period-list></period-list>
  </div>
</template>
<script>
import { XHeader, Search } from 'vux'
import PeriodList from '@/components/PeriodList'

export default {
  name: 'Periods',
  components: {
    XHeader,
    Search,
    PeriodList
  },
  data () {
    return {
      results: [],
      value: ''
    }
  },
  methods: {
    onBannerIndexChange () {
      console.log(this.bannerIndex)
    },
    setFocus () {
      this.$refs.search.setFocus()
    },
    resultClick (item) {
      window.alert('you click the result item: ' + JSON.stringify(item))
    },
    getResult (val) {
      console.log('on-change', val)
      this.results = val ? this.getResult(this.value) : []
    },
    onSubmit () {
      this.$refs.search.setBlur()
      this.$vux.toast.show({
        type: 'text',
        position: 'top',
        text: 'on submit'
      })
    },
    onFocus () {
      console.log('on focus')
    },
    onCancel () {
      console.log('on cancel')
    }
  }
}
</script>
<style lang="less">
.periods-box {
  width: 100%;
  height: 100%;
}
</style>
